<template>
  <div class="mobile">
    <div class="head-info mt-4 mb-4">
      <div class="head-sculpture flexcc">
        <img
          v-if="formData.headSculpture"
          :src="formData.headSculpture"
          alt=""
        />
        <div class="up">
          <Upload @change="(val) => (formData.headSculpture = val)">
            <img src="@/assets/img/icon_tuijianfengmian.png" />
          </Upload>
        </div>
      </div>
      <div class="info">
        <div class="name">{{ formData.userName }}</div>
        <div class="status">
          <el-select
            v-model="formData.crewStatus"
            :disabled="pageType == 'edit' && !isEdit"
            filterable
          >
            <el-option
              v-for="child in dictData.resume_work_status"
              :key="child.id"
              :value="child.dictValue"
              :label="child.dictLabel"
              >{{ child.dictLabel }}</el-option
            >
          </el-select>
        </div>
      </div>
    </div>

    <div class="body">
      <div
        class="container"
        v-if="isEdit"
      >
        <el-form
          ref="formEl"
          :model="formData"
          :rules="rules"
          label-width="150px"
          label-position="left"
        >
          <div class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t1') }}</span>
            </div>
            <div class="content">
              <div class="user-info">
                <div class="name">
                  {{ formData.crewName }}
                </div>
                <div class="">
                  <el-form-item
                    :label="t('crew.u1')"
                    prop="crewLocation"
                  >
                    <el-select v-model="formData.crewLocation">
                      <el-option
                        v-for="child in countryOptionList"
                        :key="child.countryCode"
                        :value="child.countryName"
                        :label="child.countryName"
                        >{{ child.countryName }}</el-option
                      >
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    :label="t('crew.u2')"
                    prop="passportNumber"
                  >
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}${t('crew.u2')}`"
                      v-model="formData.passportNumber"
                      :maxlength="50"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    :label="t('crew.u3')"
                    prop="duties"
                  >
                    <el-select v-model="formData.duties">
                      <el-option
                        v-for="child in dictData.duties"
                        :key="child.id"
                        :value="child.dictValue"
                        :label="child.dictLabel"
                        >{{ child.dictLabel }}</el-option
                      >
                    </el-select>
                  </el-form-item>

                  <el-form-item
                    :label="t('crew.u4')"
                    prop="seamanBookNumber"
                  >
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}${t('crew.u4')}`"
                      v-model="formData.seamanBookNumber"
                      :maxlength="50"
                    ></el-input>
                  </el-form-item>

                  <el-form-item
                    :label="t('crew.u5')"
                    prop="shippingType"
                  >
                    <el-select v-model="formData.shippingType">
                      <el-option
                        v-for="child in dictData.ships_type"
                        :key="child.id"
                        :value="child.dictValue"
                        :label="child.dictLabel"
                        >{{ child.dictLabel }}</el-option
                      >
                    </el-select>
                  </el-form-item>

                  <el-form-item
                    :label="t('crew.u6')"
                    prop="graduateSchool"
                  >
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}${t('crew.u6')}`"
                      v-model="formData.graduateSchool"
                      :maxlength="50"
                    ></el-input>
                  </el-form-item>

                  <el-form-item
                    :label="t('crew.u7')"
                    prop="nextSignOnDate"
                  >
                    <el-date-picker
                      @change="dateChange($event, 'nextSignOnDate')"
                      v-model="nextSignOnDateValue"
                      type="date"
                      :placeholder="t('select_p')"
                    />
                  </el-form-item>

                  <el-form-item
                    :label="t('crew.u8')"
                    prop="telephone"
                  >
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}${t('crew.u8')}`"
                      v-model="formData.telephone"
                      :maxlength="50"
                    ></el-input>
                  </el-form-item>

                  <el-form-item
                    :label="t('crew.u9')"
                    prop="birthDate"
                  >
                    <el-date-picker
                      @change="dateChange($event, 'birthDate')"
                      v-model="birthDateValue"
                      type="date"
                      :placeholder="t('select_p')"
                    />
                  </el-form-item>

                  <el-form-item
                    :label="t('crew.u10')"
                    prop="email"
                  >
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="formData.email"
                      :maxlength="50"
                    ></el-input>
                  </el-form-item>

                  <el-form-item
                    :label="t('crew.u11')"
                    prop="englishLevel"
                  >
                    <el-select v-model="formData.englishLevel">
                      <el-option
                        v-for="child in dictData.english_level"
                        :key="child.id"
                        :value="child.dictValue"
                        :label="child.dictLabel"
                        >{{ child.dictLabel }}</el-option
                      >
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </div>
          </div>
          <div class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t2') }}</span>
            </div>
            <div class="doc-information">
              <div class="flexcc-col">
                <Upload @change="(val) => (formData.seamanBook = val)">
                  <img
                    v-if="formData.seamanBook"
                    :src="formData.seamanBook"
                  />
                  <img
                    v-else
                    src="@/assets/img/2023-08-30_173522.png"
                  />
                </Upload>
                <p>{{ t('crew.c1') }}</p>
              </div>
              <div class="flexcc-col">
                <Upload @change="(val) => (formData.serviceBook = val)">
                  <img
                    v-if="formData.serviceBook"
                    :src="formData.serviceBook"
                  />
                  <img
                    v-else
                    src="@/assets/img/2023-08-30_173522.png"
                  />
                </Upload>
                <p>{{ t('crew.c2') }}</p>
              </div>
            </div>
          </div>
          <!-- 适任证书 -->
          <div class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t3') }}</span>
            </div>
            <div class="content">
              <div class="user-info">
                <el-form-item
                  :label="`${t('crew.l1')}`"
                  prop="certificateType"
                >
                  <el-input
                    :placeholder="`${t('crew.inputPlace')}`"
                    v-model="formData.certificateType"
                    :maxlength="100"
                  ></el-input>
                  <!-- <el-select v-model="formData.certificateType">
                    <el-option
                      v-for="child in dictData.certificate_type"
                      :key="child.id"
                      :value="child.dictValue"
                      :label="child.dictLabel"
                      >{{ child.dictLabel }}</el-option
                    >
                  </el-select> -->
                </el-form-item>

                <el-form-item
                  prop="certificateNumber"
                  :label="`${t('crew.l2')}`"
                >
                  <el-input
                    :placeholder="`${t('crew.inputPlace')}`"
                    v-model="formData.certificateNumber"
                    :maxlength="50"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  prop="periodOfValidity"
                  :label="`${t('crew.l3')}`"
                >
                  <el-date-picker
                    @change="dateChange($event, 'periodOfValidity')"
                    v-model="periodOfValidityValue"
                    type="date"
                    :placeholder="t('select_p')"
                  />
                </el-form-item>

                <el-form-item
                  prop="competentAuthority"
                  :label="`${t('crew.l4')}`"
                >
                  <el-input
                    :placeholder="`${t('crew.inputPlace')}${t('crew.l4')}`"
                    v-model="formData.competentAuthority"
                    :maxlength="50"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  prop="placeOfIssuance"
                  :label="`${t('crew.l5')}`"
                >
                  <el-input
                    :placeholder="`${t('crew.inputPlace')}${t('crew.l5')}`"
                    v-model="formData.placeOfIssuance"
                    :maxlength="50"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
          <!-- 适任职务 -->
          <div class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t4') }}</span>
            </div>
            <div class="content">
              <div class="user-info">
                <el-form-item
                  prop="duties"
                  :label="`${t('crew.l6')}`"
                >
                  <el-select v-model="formData.duties">
                    <el-option
                      v-for="child in dictData.duties"
                      :key="child.id"
                      :value="child.dictValue"
                      :label="child.dictLabel"
                      >{{ child.dictLabel }}</el-option
                    >
                  </el-select>
                </el-form-item>

                <el-form-item
                  prop="shippingType"
                  :label="`${t('crew.l7')}`"
                >
                  <el-select v-model="formData.shippingType">
                    <el-option
                      v-for="child in dictData.ships_type"
                      :key="child.id"
                      :value="child.dictValue"
                      :label="child.dictLabel"
                      >{{ child.dictLabel }}</el-option
                    >
                  </el-select>
                </el-form-item>

                <el-form-item
                  prop="monthlyPay"
                  :label="`${t('crew.l8')}`"
                >
                  <el-input-number
                      style="width: calc(100% - 110px)"
                    :min="0"
                    :max="9999999999"
                    :controls="false"
                    :placeholder="`${t('crew.inputPlace')}`"
                    v-model="formData.monthlyPay"
                  ></el-input-number>

                  <el-form-item
                      prop="currency"
                      label-width="0px"
                      style="width: 100px;margin-left: 10px;"
                  >
                    <el-select
                        v-model="formData.currency"
                        class="wp-100"
                        :placeholder="t('select_p')"
                        filterable
                        clearable
                    >
                      <el-option
                          v-for="item in dictData['currency']"
                          :key="item.dictValue"
                          :label="item.dictLabel"
                          :value="item.dictValue"
                      />
                    </el-select>
                  </el-form-item>
                </el-form-item>




                <el-form-item
                  prop="servicePeriodMonth"
                  :label="`${t('crew.l9')}`"
                >
                  <el-input-number
                    :min="0"
                    :max="999"
                    :controls="false"
                    :placeholder="`${t('crew.inputPlace')}`"
                    v-model="formData.servicePeriodMonth"
                  ></el-input-number>
                </el-form-item>
              </div>
            </div>
          </div>
          <!-- 服务经历 -->
          <div class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <div
                class="card-header"
                style="justify-content: space-between; display: flex"
              >
                <span class="ft-2">{{ t('crew.t5') }}</span>
              </div>
            </div>
            <div
              class="content"
              v-for="(item, index) in formData.shcwCrewExperiences"
              :key="index"
            >
              <div class="user-info">
                <el-descriptions :column="1">
                  <el-descriptions-item
                    prop="startServiceTime"
                    :label="`${t('crew.l10')}`"
                  >
                    <el-date-picker
                      @change="rangeChange($event, 'startServiceTime', 'endServiceTime', item)"
                      v-model="item.serviceTime"
                      type="monthrange"
                      :placeholder="t('select_p')"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item
                    prop="shipName"
                    :label="`${t('crew.l11')}`"
                  >
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="item.shipName"
                    ></el-input>
                  </el-descriptions-item>
                  <el-descriptions-item
                    prop="shipFlag"
                    :label="`${t('crew.l12')}`"
                  >
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="item.shipFlag"
                    ></el-input>
                  </el-descriptions-item>
                  <el-descriptions-item
                    prop="deadweightTon"
                    :label="`${t('crew.l13')}`"
                  >
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="item.deadweightTon"
                    ></el-input>
                  </el-descriptions-item>
                  <el-descriptions-item
                    prop="hostModel"
                    :label="`${t('crew.l14')}`"
                  >
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="item.hostModel"
                    ></el-input>
                  </el-descriptions-item>
                  <el-descriptions-item
                    prop="horsepower"
                    :label="`${t('crew.l15')}`"
                  >
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="item.horsepower"
                    ></el-input>
                  </el-descriptions-item>
                  <el-descriptions-item
                    prop="power"
                    :label="`${t('crew.l16')}`"
                  >
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="item.power"
                    ></el-input>
                  </el-descriptions-item>
                  <el-descriptions-item
                    prop="grossTon"
                    :label="`${t('crew.l17')}`"
                  >
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="item.grossTon"
                    ></el-input>
                  </el-descriptions-item>
                  <el-descriptions-item
                    prop="shippingType"
                    :label="`${t('crew.l18')}`"
                  >
                    <el-select v-model="item.shippingType">
                      <el-option
                        v-for="child in dictData.ships_type"
                        :key="child.id"
                        :value="child.dictValue"
                        :label="child.dictLabel"
                        >{{ child.dictLabel }}</el-option
                      >
                    </el-select>
                  </el-descriptions-item>
                  <el-descriptions-item
                    prop="duties"
                    :label="`${t('crew.l19')}`"
                  >
                    <el-select v-model="item.duties">
                      <el-option
                        v-for="child in dictData.duties"
                        :key="child.id"
                        :value="child.dictValue"
                        :label="child.dictLabel"
                        >{{ child.dictLabel }}</el-option
                      >
                    </el-select>
                  </el-descriptions-item>
                  <el-descriptions-item
                    prop="corporateName"
                    :label="`${t('crew.l20')}`"
                  >
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="item.corporateName"
                    ></el-input>
                  </el-descriptions-item>
                </el-descriptions>
              </div>

              <el-button
                class="button wp-100"
                v-if="formData.shcwCrewExperiences.length > 1"
                @click="delExperienceFn(index)"
                >{{ t('crew.b6') }}</el-button
              >
            </div>

            <el-button
              type="primary"
              class="button wp-100 mt-1"
              color="#252628"
              @click="addExperienceFn"
              :disabled="formData.shcwCrewExperiences.length == 3"
              >{{ t('crew.b3') }}</el-button
            >
          </div>
        </el-form>
      </div>
      <div
        class="container"
        v-else
      >
        <div class="mb-3">
          <div
            slot="header"
            class="clearfix title"
          >
            <span class="ft-2">{{ t('crew.t1') }}</span>
          </div>
          <div class="content">
            <div class="user-info">
              <el-descriptions :column="1">
                <el-descriptions-item :label="`${t('crew.u1')}`">
                  {{ formData.crewLocation }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u2')}`">
                  {{ formData.passportNumber }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u3')}`">
                  <span
                    v-for="child in dictData.duties"
                    :key="child"
                  >
                    <span v-if="child.dictValue == formData.duties">
                      {{ child.dictLabel }}
                    </span>
                  </span>
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u4')}`">
                  {{ formData.seamanBookNumber }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u5')}`">
                  <span
                    v-for="child in dictData.ships_type"
                    :key="child"
                  >
                    <span v-if="child.dictValue == formData.shippingType">
                      {{ child.dictLabel }}
                    </span>
                  </span>
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u6')}`">
                  {{ formData.graduateSchool }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u7')}`">
                  {{ nextSignOnDateValue }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u8')}`">
                  {{ formData.telephone }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u9')}`">
                  {{ periodOfValidityValue }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u10')}`">
                  {{ formData.email }}
                </el-descriptions-item>
                <el-descriptions-item :label="`${t('crew.u11')}`">
                  <span
                    v-for="child in dictData.english_level"
                    :key="child"
                  >
                    <span v-if="child.dictValue == formData.englishLevel">
                      {{ child.dictLabel }}
                    </span>
                  </span>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
        <div class="mb-3">
          <div
            slot="header"
            class="clearfix title"
          >
            <span class="ft-2">{{ t('crew.t2') }}</span>
          </div>
          <div class="doc-information">
            <div>
              <img
                :src="formData.seamanBook"
                alt=""
              />
              <p style="text-align: center">{{ t('crew.c1') }}</p>
            </div>
            <div>
              <img
                :src="formData.serviceBook"
                alt=""
              />
              <p style="text-align: center">{{ t('crew.c2') }}</p>
            </div>
          </div>
        </div>
        <div class="mb-3">
          <div
            slot="header"
            class="clearfix title"
          >
            <span class="ft-2">{{ t('crew.t3') }}</span>
          </div>
          <div class="content">
            <div class="user-info">
              <el-descriptions :column="1">
                <el-descriptions-item
                  prop="certificateType"
                  :label="`${t('crew.l1')}`"
                >
                  <!-- <span
                    v-for="child in dictData.certificate_type"
                    :key="child"
                  >
                    <span v-if="child.dictValue == formData.certificateType">
                      {{ child.dictLabel }}
                    </span>
                  </span> -->
                </el-descriptions-item>
                <el-descriptions-item
                  prop="certificateNumber"
                  :label="`${t('crew.l2')}`"
                >
                </el-descriptions-item>
                <el-descriptions-item
                  prop="periodOfValidity"
                  :label="`${t('crew.l3')}`"
                >
                  {{ periodOfValidityValue }}
                </el-descriptions-item>
                <el-descriptions-item
                  prop="competentAuthority"
                  :label="`${t('crew.l4')}`"
                >
                </el-descriptions-item>
                <el-descriptions-item
                  prop="placeOfIssuance"
                  :label="`${t('crew.l5')}`"
                >
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
        <div class="mb-3">
          <div
            slot="header"
            class="clearfix title"
          >
            <span class="ft-2">{{ t('crew.t4') }}</span>
          </div>
          <div class="content">
            <div class="user-info">
              <el-descriptions :column="1">
                <el-descriptions-item
                  prop="duties"
                  :label="`${t('crew.l6')}`"
                >
                  <span
                    v-for="child in dictData.duties"
                    :key="child"
                  >
                    <span v-if="child.dictValue == formData.duties">
                      {{ child.dictLabel }}
                    </span>
                  </span>
                </el-descriptions-item>
                <el-descriptions-item
                  prop="shippingType"
                  :label="`${t('crew.l7')}`"
                >
                  <span
                    v-for="child in dictData.ships_type"
                    :key="child"
                  >
                    <span v-if="child.dictValue == formData.shippingType">
                      {{ child.dictLabel }}
                    </span>
                  </span>
                </el-descriptions-item>
                <el-descriptions-item
                  prop="monthlyPay"
                  :label="`${t('crew.l8')}`"
                >
                  <template #default="scope">
                    {{formData.monthlyPay}}
                    {{ getDictLabel('currency', formData.currency) }}
                  </template>
                </el-descriptions-item>
                <el-descriptions-item
                  prop="servicePeriodMonth"
                  :label="`${t('crew.l9')}`"
                >
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
        <div
          class="mb-3"
          v-for="(item, index) in formData.shcwCrewExperiences"
          :key="index"
        >
          <div
            slot="header"
            class="clearfix title"
          >
            <span class="ft-2">{{ t('crew.t5') }}</span>
          </div>
          <div class="content">
            <div class="user-info">
              <el-descriptions :column="1">
                <el-descriptions-item
                  prop="startServiceTime"
                  :label="`${t('crew.l10')}`"
                >
                  <div v-if="item.startServiceTime && item.endServiceTime">{{ dateFormat(item.startServiceTime, 2).slice(0, 7) }}-{{ dateFormat(item.endServiceTime, 2).slice(0, 7) }}</div>
                </el-descriptions-item>
                <el-descriptions-item
                  prop="shipName"
                  :label="`${t('crew.l11')}`"
                >
                </el-descriptions-item>
                <el-descriptions-item
                  prop="shipFlag"
                  :label="`${t('crew.l12')}`"
                >
                </el-descriptions-item>
                <el-descriptions-item
                  prop="deadweightTon"
                  :label="`${t('crew.l13')}`"
                >
                </el-descriptions-item>
                <el-descriptions-item
                  prop="hostModel"
                  :label="`${t('crew.l14')}`"
                >
                </el-descriptions-item>
                <el-descriptions-item
                  prop="horsepower"
                  :label="`${t('crew.l15')}`"
                >
                </el-descriptions-item>
                <el-descriptions-item
                  prop="power"
                  :label="`${t('crew.l16')}`"
                >
                </el-descriptions-item>
                <el-descriptions-item
                  prop="grossTon"
                  :label="`${t('crew.l17')}`"
                >
                </el-descriptions-item>
                <el-descriptions-item
                  prop="shippingType"
                  :label="`${t('crew.l18')}`"
                >
                  <span
                    v-for="child in dictData.ships_type"
                    :key="child"
                  >
                    <span v-if="child.dictValue == item.shippingType">
                      {{ child.dictLabel }}
                    </span>
                  </span>
                </el-descriptions-item>
                <el-descriptions-item
                  prop="duties"
                  :label="`${t('crew.l19')}`"
                >
                  <span
                    v-for="child in dictData.duties"
                    :key="child"
                  >
                    <span v-if="child.dictValue == item.duties">
                      {{ child.dictLabel }}
                    </span>
                  </span>
                </el-descriptions-item>
                <el-descriptions-item
                  prop="corporateName"
                  :label="`${t('crew.l20')}`"
                >
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <el-button
        v-if="pageType == 'edit'"
        type="primary"
        style="width: 100%"
        @click="saveOredit"
        >{{ isEdit ? t('crew.b4') : t('crew.b5') }}</el-button
      >
      <el-button
        type="primary"
        style="width: 100%"
        @click="addSaveFn"
        v-if="pageType == 'add'"
      >
        {{ t('crew.b4') }}</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { addCrewResume, getCrewResumeById, editCrewResume } from '@/service/crew.js'
import { countryListApi } from '@/service/common.js'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import Upload from '@/components/Upload.vue'

import { dateFormat } from '@/utils/index'
import useDict from '@/hooks/useDict'

import { showSuccessToast, showFailToast } from 'vant'
import 'vant/es/toast/style'

const { dictData, getDictData, getDictLabel } = useDict()

const emit = defineEmits(['update:CrewResumeVis'])
const { t, locale } = useI18n()
const router = useRouter()
const nextSignOnDateValue = ref(undefined)
const birthDateValue = ref(undefined)
const periodOfValidityValue = ref(undefined)
const { pageType } = router.currentRoute.value.query
const formData = ref({
  avatar: JSON.parse(localStorage.getItem('login')).userInfo.avatar,
  userName: JSON.parse(localStorage.getItem('login')).userInfo.userName,
  shcwCrewExperiences: [{}]
})
const formEl = ref()
const rules = ref({
  crewLocation: [{ required: true, message: '', trigger: 'change' }],
  passportNumber: [{ required: false, message: '', trigger: 'change' }],
  duties: [{ required: true, message: '', trigger: 'change' }],
  seamanBookNumber: [{ required: false, message: '', trigger: 'change' }],
  shippingType: [{ required: true, message: '', trigger: 'change' }],
  graduateSchool: [{ required: true, message: '', trigger: 'change' }],
  nextSignOnDate: [{ required: true, message: '', trigger: 'change' }],
  telephone: [{ required: true, message: '', trigger: 'change' }],
  birthDate: [{ required: true, message: '', trigger: 'change' }],
  email: [{ required: true, message: '', trigger: 'change' }],
  englishLevel: [{ required: true, message: '', trigger: 'change' }],
  certificateType: [{ required: true, message: '', trigger: 'change' }],
  certificateNumber: [{ required: true, message: '', trigger: 'change' }],
  periodOfValidity: [{ required: true, message: '', trigger: 'change' }],
  competentAuthority: [{ required: true, message: '', trigger: 'change' }],
  placeOfIssuance: [{ required: true, message: '', trigger: 'change' }],
  monthlyPay: [{ required: true, message: '', trigger: 'change' }],
  currency: [{ required: true, message: '', trigger: 'change' }],
  servicePeriodMonth: [{ required: true, message: '', trigger: 'change' }]
})

// 新增保存
const addSaveFn = async () => {
  if (!formData.value.crewStatus) {
    console.log('111')
    showFailToast(t('crew.w4'))
    return
  }
  if (!formData.value.headSculpture) {
    showFailToast(t('crew.w1'))
    return
  }
  if (!formData.value.seamanBook) {
    showFailToast(t('crew.w2'))
    return
  }
  if (!formData.value.serviceBook) {
    showFailToast(t('crew.w3'))
    return
  }

  if (!formEl.value) return

  formEl.value.validate((valid, fields) => {
    if (valid) {
      addCrewResume(formData.value).then(({ msg }) => {
        showSuccessToast(msg)
        router.go(-1)
      })
    } else {
      showFailToast(t('crew.w0'))
    }
  })
}

// 添加经历
const addExperienceFn = () => {
  formData.value.shcwCrewExperiences.push({
    startServiceTime: undefined,
    shipName: undefined,
    shipFlag: undefined,
    deadweightTon: undefined,
    hostModel: undefined,
    horsepower: undefined,
    power: undefined,
    grossTon: undefined,
    shippingType: undefined,
    duties: undefined,
    corporateName: undefined,
    serviceTime: []
  })
}
const delExperienceFn = (index) => {
  formData.value.shcwCrewExperiences = formData.value.shcwCrewExperiences.filter((item, idx) => idx !== index)
}

const dateChange = (val, key) => {
  if (val) {
    // 10位时间戳
    formData.value[key] = String(val).substring(0, 10) * 1
  } else {
    formData.value[key] = null
  }
}
const rangeChange = (val, start, end, item) => {
  if (val) {
    // 10位时间戳
    item[start] = val[0] / 1000
    item[end] = val[1] / 1000
  } else {
    item[start] = null
    item[end] = null
  }
}

const isEdit = ref(pageType == 'edit' ? false : true)
const saveOredit = () => {
  if (isEdit.value) {
    // 保存
    editCrewResume(formData.value).then(({ msg }) => {
      showSuccessToast(msg)
      isEdit.value = false
      getDetailInfo()
    })
  } else {
    isEdit.value = true
  }
}

const countryOptionList = ref([])
const getDetailInfo = () => {
  getCrewResumeById(JSON.parse(localStorage.getItem('login')).userInfo.id).then((res) => {
    formData.value = { ...res.data, ...formData.value }
    //预计下次登船转换
    // formData.value.nextSignOnDate=
    nextSignOnDateValue.value = dateFormat(formData.value.nextSignOnDate, 2)
    //出生日期转换
    // formData.value.birthDate=
    birthDateValue.value = dateFormat(formData.value.birthDate, 2)
    //有效期转换
    // formData.value.periodOfValidity=dateFormat(formData.value.periodOfValidity, 2)
    periodOfValidityValue.value = dateFormat(formData.value.periodOfValidity, 2)
    //
    if (formData.value.shcwCrewExperiences) {
      formData.value.shcwCrewExperiences = formData.value.shcwCrewExperiences.map((item) => {
        item.serviceTime = [dateFormat(item.startServiceTime, 2).slice(0, 7), dateFormat(item.endServiceTime, 2).slice(0, 7)]
        return item
      })
    } else {
      formData.value.shcwCrewExperiences = [{}]
    }

    serviceBookFile.value = [
      {
        name: 'serviceBookFile',
        url: res.data.serviceBook
      }
    ]
    seamanBookFile.value = [
      {
        name: 'serviceBookFile',
        url: res.data.seamanBook
      }
    ]
  })
}
onMounted(() => {
  countryListApi().then((res) => {
    countryOptionList.value = res.data
  })
  getDictData('resume_work_status')
  getDictData('duties')
  getDictData('currency')
  getDictData('ships_type')
  getDictData('english_level')
  getDictData('certificate_type')
  if (pageType == 'edit') {
    getDetailInfo()
  }
})
</script>
<style scoped lang="scss">
.mobile {
  padding: 10px;
}

.container {
  .button {
    // padding: 20px;
    margin-right: 20px;

    :deep(span) {
      font-size: 14px;
    }
  }

  .doc-information {
    padding-top: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;

    div {
      img {
        width: 100%;
        height: 150px;
      }

      p {
        text-align: center;
        color: #252628;
        margin-top: 14px;
      }
    }
  }
}

.head-info {
  width: 100%;
  display: grid;
  grid-template-columns: 50% auto;
  gap: 10px;

  .head-sculpture {
    width: 100%;
    height: 120px;
    background: #ccc;
    position: relative;

    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .up {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 40px;
      height: 40px;
      transform: translate(-50%, -50%);
    }
  }

  .info {
    .name {
      font-size: 16px;
      font-weight: bold;
      color: #252628;
      line-height: 40px;
      margin-bottom: 20px;
      word-wrap: break-word;
      width: 100%;
    }

    .status {
      //   width: 200px;
      font-weight: 400;
      color: #ca2a02;
      text-align: center;

      //   :deep(.el-input__wrapper) {
      //     height: 42px;

      //     .el-input__inner {
      //       font-size: 24px;
      //     }
      //   }
    }
  }

  :deep(.el-button) {
    span {
      font-size: 14px;
    }
  }
}

.body {
  width: 100%;
  padding-bottom: 30px;

  .title {
    font-weight: bold;
    color: #ca2a02;
    border-bottom: 2px solid black;
    // line-height: 50px;
    // height: 60px;
  }

  :deep(.table_header) {
    height: 50px;
    background: #f0f3f8;
    font-size: 14px;
    font-weight: bold;
    color: #252628;
    border: rgba(235, 235, 235, 1) 1px solid;
  }

  .content {
    width: 100%;
    padding-top: 40px;

    &:not(:last-of-type) {
      border-bottom: 1px dashed #000;
      padding-bottom: 20px;
    }

    .user-info {
      .name {
        width: 100%;
        display: flex;
        font-size: 24px;
        font-weight: 800;
        color: #252628;
        line-height: 22px;
        margin-bottom: 20px;

        div {
          min-width: 40px;
          height: 24px;
          background: rgba(202, 42, 2, 0.1);
          border-radius: 2px;
          margin-left: 12px;
          font-size: 12px;
          font-weight: 400;
          color: #ca2a02;
          padding: 0 8px;
        }
      }

      :deep(.el-descriptions__cell) {
        display: flex;
        justify-content: space-between;
        // padding-right: 30px;
      }

      :deep(.el-descriptions__label) {
        min-width: 100px;
        text-align: left;
        font-weight: 400;
        // line-height: 48px;
        display: inline-block;
        font-weight: 400;
        color: #6a6973 !important;
      }

      :deep(.el-descriptions__content) {
        width: calc(100% - 150px);
        // font-weight: normal;
        // color: #252628;
        //   margin-left: 40px;
        //   line-height: 48px;
        //   span {
        //     font-size: 18px;
        //   }

        //   .el-input__wrapper {
        //     //   height: 48px;
        //     //   min-width: 360px;

        //     .el-input__inner {
        //       font-size: 16px;
        //     }
        //   }
      }

      .el-select {
        width: 100%;
      }

      :deep(.el-date-editor) {
        width: 100%;
      }

      :deep(.el-input__wrapper) {
        width: 100%;
      }
    }
  }
}
</style>
